---
import { getCollection, getEntry } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import { PagesNavigation } from '@features/pages-navigation/components/PagesNavigation';
import { Header } from '@features/docs/components/Header';
import { getFrameworkDisplayText } from '@utils/framework';
import type { Framework, MenuSection } from '@ag-grid-types';
import { getDocsPages } from '@features/docs/utils/pageData';
import { SideNavigation } from '@features/pages-navigation/components/SideNavigation';
import { getFirstParagraphText } from '@utils/markdoc/getFirstParagraphText';
import { DOCS_TAB_ITEM_ID_PREFIX } from '@constants';
import { getFilteredMenuSections } from '@features/pages-navigation/utils/getFilteredMenuSections';
import { getHeadings } from '@utils/markdoc/getHeadings';
import { isApiMenuPath } from '@utils/apiMenuPath';
import styles from '@design-system/modules/docs.module.scss';

export async function getStaticPaths() {
    const pages = await getCollection('docs');
    return getDocsPages(pages);
}

const { page } = Astro.props;
const currentFramework = Astro.params.framework as Framework;
const pageName = Astro.params.pageName as Framework;
const path = Astro.url.pathname;
const { title, enterprise, hideSideMenu, hidePageMenu } = page.data;

const { Content } = await page.render();
const headings = await getHeadings({
    title,
    markdocContent: page.body,
    framework: currentFramework,
    getTabItemSlug: (id) => `${DOCS_TAB_ITEM_ID_PREFIX}${id}`,
});

const { data: menu } = await getEntry('menu', 'data');
const frameworkMenuSections: MenuSection[] = getFilteredMenuSections({
    menuSections: menu.main.sections,
    framework: currentFramework,
});
const apiMenuSections: MenuSection[] = getFilteredMenuSections({
    menuSections: menu.api.sections,
    framework: currentFramework,
});

const description = page.data.description || getFirstParagraphText(page.body);
const isApiPage = isApiMenuPath({
    pageName,
    menuData: menu,
});
---

<Layout
    title={`${getFrameworkDisplayText(currentFramework)} Grid: ${title} | AG Grid`}
    description={description}
    showSearchBar={true}
    showDocsNav={true}
>
    <div class:list={[hidePageMenu && styles.noLeftMenu, styles.contentViewport, 'layout-grid']}>
        {
            !hidePageMenu && (
                <PagesNavigation
                    client:load
                    menuSections={isApiPage ? apiMenuSections : frameworkMenuSections}
                    framework={currentFramework}
                    pageName={pageName}
                />
            )
        }
        <div
            id="doc-content"
            class:list={[
                styles.docPage,
                {
                    noSideMenu: styles.hideSideMenu,
                },
            ]}
        >
            <Header client:load title={title} framework={currentFramework} isEnterprise={enterprise} path={path} />

            {/* Wrapping div is a hack to target "intro" section of docs page */}
            <div class={styles.pageSections}>
                <Content framework={currentFramework} page={page} />
            </div>
        </div>

        {!hideSideMenu && <SideNavigation client:load headings={headings} />}
    </div>
</Layout>
